<template>
  <div>
    <div class="wrap">
      <div class="title">
        <p class="name">乐趣</p>
        <p class="decorate">
          ——— <span class="iconfont search-icon">&#xe632;</span> ———
        </p>
        <p class="desc">INTERESTING</p>
      </div>
      <div class="joy-box">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide
            v-for="(item1, index1) in joyArr.length / 4"
            :key="index1"
          >
            <ul class="list">
              <li v-for="(item, index) in joyArr0" :key="index">
                <a href="##">
                  <img :src="item.img" alt="" />
                </a>
                <div class="list-box">
                  <a href="##" class="list-name">{{ item.title }}</a>
                  <a href="##" class="list-author">{{ item.writer }}</a>
                </div>
                <p class="list-desc">{{ item.content }}</p>
              </li>
            </ul>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 同HomeMovement bug
      joyArr: [],
      joyArr0: [],

      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        loop: true,
        // Some Swiper option/callback...
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    this.swiper.slideTo(1, 1000, false);
    this.$api.HomeInteresting().then((res) => {
      if (res.data.success === true) {
        var arr = res.data.interesting;
        for (var i = 0; i < arr.length; i++) {
          arr[i].img =
            "http://iwenwiki.com/api/" + String(arr[i].img).slice(24);
        }
        this.joyArr = arr;
        var n = 0;
        for (var j = 0; j < 4; j++) {
          // for (var k = 0 * 4; k < 4; k++) {  // 有个bug
          this.joyArr0[j] = arr[n];
          n++;
          // }
        }
      }
    });
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 1200px;
  margin: 0 auto;
}
.title {
  width: 140px;
  height: 73px;
  margin: 40px auto 0;
  text-align: center;
  .name {
    color: #292929;
    margin-bottom: 5px;
    font-size: 24px;
  }
  .decorate {
    opacity: 0.1;
  }
  .desc {
    color: #292929;
    margin-bottom: 5px;
  }
}
.swiper-container {
  --swiper-pagination-color: #00ff33;
}
.joy-box {
  margin: 50px 0 20px;
  text-align: left;
}
.list {
  overflow: hidden;
  margin-bottom: 50px;
}
.list img {
  width: 140px;
  height: 140px;
  float: left;
  margin-right: 12px;
}
.list li {
  width: 50%;
  height: 148px;
  margin-bottom: 10px;
  float: left;
}
.list-box {
  padding-top: 6px;
}
.list-name {
  display: block;
  color: #000;
  font-size: 16px;
  font-weight: 700;
}
.list-name:hover {
  color: #52c58c;
}
.list-author {
  display: block;
  margin: 12px 0;
  font-size: 12px;
  color: #6dc7fa;
}
.list-desc {
  text-align: left;
  font-size: 16px;
  color: #646464;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>